{% load custom_tags %}
<div {% if component.id %} component-id="{{ component.id }}"{% endif %} component-type="{{ component.type }}" class="componentItem sort-handle list-group-item reportComponent {% if component.isContainer %}containerComponent{% endif %}">
  {% if component.isContainer %}<div class='fa container-collapse fa-angle-down'>&nbsp;</div>{% endif %}
  <div style="text-align: center; width: 2rem; padding: .2rem">
    <i class="{{ component.iconType }}" style="color: {% if component.iconColorDynamic %}{{ component.iconColorDynamic }}{% else %}{{ component.iconColor }}{% endif %}"></i>
  </div>
  <div class="componentName">{{ component.name }}</div>
  {% if editControls %}
    <div class="componentEditControls">
      <span class="assignee">{{ component.json.assignee_name }}</span>
      <button class='reviewStatus' reportID='{{ report.id }}' componentID='{{ component.id }}' value='{{ component.reviewStatus }}' title='Review status: {{ component.reviewStatusValue }}'>&nbsp;</button>
      {% include 'snippets/smallButton.html' with name='Edit Component' type='pen' class='componentEdit text-dark' attrs='componentID='|addstr:component.id %}
      {% include 'snippets/smallButton.html' with name='Duplicate Component' type='copy' class='componentDuplicate text-dark' attrs='componentID='|addstr:component.id %}
      {% include 'snippets/smallButton.html' with name='Delete Component' type='times-circle' class='componentDelete text-danger' attrs='componentID='|addstr:component.id %}
    </div>
  {% endif %}
  {% if component.isContainer %}
    <div class="containerDiv">
      {% for component in component.children %}
        {% include "snippets/singleComponent.html" with editControls=editControls%}
      {% endfor %}
    </div>
  {% endif %}
</div>
